<script setup>
	 
const SetInfo = [
	{
		ImgUrl:'../../static/my/配置(1).png',
		title:'设置'
	},
	{
		ImgUrl:'../../static/my/隐藏文件(1).png',
		title:'隐私中心'
	},
	{
		ImgUrl:'../../static/my/帮助中心(1).png',
		title:'问题反馈'
	}
]
	const toMyCart = ()=>{
		uni.navigateTo({
			url:'/pages/MyCart/MyCart'
		})
	}
const toAddCart=()=>{
	uni.navigateTo({
		url:'/pages/addCartInfo/addCartInfo'
	})
}
</script>

<template>
	<view class="content">
		<view class="use-nav">
			<image style="
			position: absolute;
			bottom: 20rpx;
			left: 0;
			width: 60rpx;
			height: 60rpx;
			" src="../../static/my/分组 4(1).png" 
			mode="aspectFill"
			></image>
				<image class="image_user" src="../../static/my/分组 17(1).png" mode=""></image>
			<view class="user_right">
				<view class="user_top">
					<view class="text">
						风花雪月
					</view>
					<uni-icons custom-prefix="iconfont" type="icon-nvsheng" size="20"></uni-icons>
					<uni-icons style="margin-left: 250rpx;"  type="right" size="16"></uni-icons>
				</view>
				<view class="bottom_user">
					<view class="lie">
						<text>326</text>
						<text style="font-size: 28rpx;">动态</text>
					</view>
					<view style="height: 60rpx;  border: 0.5px solid black;width: 0;background-color: black;"></view>
					<view  class="lie">
						<text>4526</text>
						<text style="font-size: 28rpx;">点赞</text>
					</view>
				</view>
			</view>
		</view>
	
	<view class="cart_live_bottom">
					
				</view>
		<view class="cart_live">
				
				<view class="live_image">
					<image style="width: 100%;height: 100%;" src="../../static/my/画板 2(1).png" mode=""></image>
				</view>
				<text style="margin-left: 20rpx;font-size: 32rpx;">与火火在一起已经90天了</text>
		
		</view>
	
	
	<view class="my_cart">
		<view class="my_text">
			<text style=" background: linear-gradient(to top, #feea3a 40%, #fff 30%); ">我的宠物</text>
			<uni-icons type="right" @click="toMyCart"></uni-icons>
		</view>
		<view class="cart_Info">
			<view class="cart_Li">
				<view class="li_image">
					<image style="width: 100%; height: 100%;" src="../../static/my/分组 17(1).png" mode=""></image>
				</view>
				<view class="">
					<view class="mycart_name">
						<text style="font-weight: 700; font-size: 34rpx;margin-right: 20rpx;">火火</text>
						<uni-icons custom-prefix="iconfont" type="icon-nvsheng"></uni-icons>
					</view>
					<view class="live">
						6个月 | 5kg
					</view>
				</view>
			</view>
		<view class="cart_Li">
			<view class="li_image">
				<image style="width: 100%; height: 100%;" src="../../static/my/分组 17(1).png" mode=""></image>
			</view>
			<view class="">
				<view class="mycart_name">
					<text style="font-weight: 700; font-size: 34rpx;margin-right: 20rpx;">火火</text>
					<uni-icons custom-prefix="iconfont" type="icon-nansheng"></uni-icons>
				</view>
				<view class="live">
					6个月 | 5kg
				</view>
			</view>
		</view>
		</view>
		<view @click="toAddCart" class="cart_add">
			<uni-icons type="plusempty"></uni-icons>
			<text>添加宠物</text>
		</view>
		
	</view>
	
	<MySetInfo v-for="item in SetInfo" :key="item.ImgUrl" :SetInfo="item"/>
	</view>
</template>


<style lang="scss" scoped>

.use-nav{
	position: relative;
	width: 690rpx;
	height: 200rpx;
	margin: 0 auto;
	display: flex;
	.image_user{
		width: 160rpx;
		height: 160rpx;
	}
	.user_right{
		margin-left: 20rpx;
		.user_top{
			display: flex;
			.text{
				margin-right: 10rpx;
			}
		}
		.bottom_user{
			display: flex;
			margin-top: 25rpx;
			align-items: center;
			justify-content: space-around;
			.lie{
				display: flex;
				flex-direction:column;
				align-items: center;
			}
		}
	}
	
}
.cart_live{
	position: absolute;
	left: 30rpx;
	display: flex;
	align-items: center;
	margin: 10rpx auto;
	width: 686rpx;
	height: 76rpx;
	background-color: white;
	border: 2px solid black;
	border-radius: 80rpx;
overflow: hidden;
	z-index: 999;
	.live_image{
		width: 200rpx;
		height: 200rpx;

	}
}
.cart_live_bottom{
position: absolute;
left: 30rpx;
	margin: 10rpx auto;
	width: 686rpx;
	height: 76rpx;
	background-color: white;
	border: 2px solid black;
	border-radius: 80rpx;
	transform: rotateZ(2deg);
	
}
.my_cart{
	margin: 0 auto;
	width: 656rpx;
	height: 366rpx;
	border: 2px solid black;
	border-radius: 40rpx;
	background-color: #fff;
	margin-top: 120rpx;
	padding: 15rpx;
.my_text{
	display: flex;
	justify-content: space-between;
	font-weight: 700;
	font-size: 32rpx;
}
.cart_Info{
	display: flex;
	margin-top: 30rpx;
	justify-content: space-between;
	.cart_Li{
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 300rpx;
		height: 160rpx;
		border: 1px solid black;
		border-radius: 20rpx;
		.live{
			margin-top: 10rpx;
			font-size: 30rpx;
		}
		.li_image{
			width: 92rpx;
			height: 92rpx;
		}
	}
}
.cart_add{
	font-size: 28rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 25rpx;
	width: 99%;
	height: 80rpx;
	border: 1px dashed black;
	border-radius: 20rpx;
}
}
</style>
